<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import Navbar from './components/Navbar.vue'

const route = useRoute()
const showNavbar = ref(true)

// 监听路由变化，登录页和注册页不显示导航栏
watch(() => route.path, (newPath) => {
  showNavbar.value = !['/login', '/register'].includes(newPath)
}, { immediate: true })
</script>

<template>
  <div class="app-container">
    <Navbar v-if="showNavbar" />
    <main class="main-content" :class="{ 'no-navbar': !showNavbar }">
      <router-view />
    </main>
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.main-content {
  flex: 1;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  height: 0; /* 关键：配合flex:1实现滚动 */
}

.main-content.no-navbar {
  padding-top: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
}
</style>
